<template>
  <div>
    <a-form :form="form">
      <a-form-item>
        <a-input
          placeholder="账号"
          autocomplete="off"
          v-decorator="['username', { rules: [{ required: true, message: '用户名不能为空!' }] }]"
        >
        </a-input>
      </a-form-item>
      <a-form-item>
        <a-input
          placeholder="手机号"
          autocomplete="off"
          v-decorator="[
            'mobile',
            {
              rules: [{ validator: validatePhone }]
            }
          ]"
        >
        </a-input>
      </a-form-item>

      <a-form-item>
        <a-row :gutter="24">
          <a-col :span="24">
            <a-input
              placeholder="验证码"
              :maxLength="4"
              autocomplete="off"
              @keydown.enter.native="handleNext"
              v-decorator="['code', { rules: [{ required: true, validator: validateCode }] }]"
            >
            </a-input>
            <div class="msgBtn">
              <a-button type="primary" @click="validateMobile" :loading="timeGo" style="width: 100%">
                <span v-show="!timeGo">获取验证码</span>
                <span v-show="timeGo">&nbsp;{{ time }}&nbsp;秒</span>
              </a-button>
            </div>
          </a-col>
        </a-row>
      </a-form-item>

      <a-form-item style="margin: 44px 0 12px;">
        <a-button type="primary" style="width: 100%;fontSize: 14px" @click="handleNext" :loading="isNext"
          >下一步</a-button
        >
      </a-form-item>
    </a-form>
  </div>
</template>

<script>
import { getShortCodeByForget, validPhoneByForget, validShortCodeByForget } from '@/api/user'
import { validatePhone, validateCode } from '@/utils/validate'
export default {
  name: 'ValidatePhone',

  data () {
    return {
      timeGo: false,
      time: 90,
      isNext: false
    }
  },
  props: {
    params: {
      type: Object,
      required: false,
      default: () => {}
    }
  },
  watch: {
    params: {
      handler (val) {
        if (val) {
          const { username, mobile } = val
          this.$nextTick(() => {
            this.form.setFieldsValue({
              username,
              mobile
            })
          })
        }
      },
      immediate: true
    }
  },
  beforeCreate () {
    this.form = this.$form.createForm(this)
  },

  destroyed () {
    clearInterval(this.timer)
  },

  methods: {
    // 下一步
    handleNext () {
      this.form.validateFields((err, values) => {
        if (!err) {
          this.isNext = true

          const params = {
            username: values.username,
            mobile: values.mobile,
            code: values.code
          }

          // 验证短信验证码
          validShortCodeByForget(params)
            .then(res => {
              if (res.code === 0 && res.data) {
                this.$emit('stepChange', 1, params)
              } else {
                this.$message.error(res.msg)
              }
            })
            .finally(() => (this.isNext = false))
        }
      })
    },

    // 验证手机
    validateMobile () {
      this.form.validateFields(['mobile'], (errors, values) => {
        if (!errors) {
          this.timeGo = true
          this.timer = setInterval(() => {
            this.time -= 1
            if (this.time === 0) {
              clearInterval(this.timer)
              this.time = 90
              this.timeGo = false
            }
          }, 1000)
          // 验证手机号
          validPhoneByForget(values.mobile)
            .then(res => {
              if (res.code === 0 && res.data) {
                this.getCode(values.mobile)
              } else {
                this.$message.error(res.msg)
                clearInterval(this.timer)
                this.time = 90
                this.timeGo = false
              }
            })
            .catch(() => {
              clearInterval(this.timer)
              this.timeGo = false
              this.time = 90
            })
        }
      })
    },

    // 获取短信验证码
    getCode (mobile) {
      getShortCodeByForget(mobile)
        .then(res => {
          if (res.code === 0 && res.data) {
            this.$message.success('验证码发送成功！')
          } else {
            this.$message.error(res.msg)
            clearInterval(this.timer)
            this.timeGo = false
            this.time = 90
          }
        })
        .catch(() => {
          clearInterval(this.timer)
          this.timeGo = false
          this.time = 90
        })
    },

    validateCode,
    validatePhone
  }
}
</script>
<style lang="less" scoped>
.msgBtn {
  position: absolute;
  right: 16px;
  top: -10px;
}
</style>
